<template>
  <div class="yuncun">
    <div class="sou">
      <van-icon name="wap-nav" />
      <div class="sou-a">
        <div class="sou-b">
          <van-icon name="close" class="cha" @click="cha()" />
          <input
            type="text"
            :placeholder="ci"
            class="inp"
            v-model="name"
            @click="sou(name)"
            @keydown.enter="getSou(name)"
          />
          <ol v-if="falg">
            <li
              v-for="(data, qq) in list"
              :key="data.score + qq"
              v-show="!name"
              @click="getDataName(data.searchWord)"
            >
              <van-icon name="fire-o" color="#ee0a24" /> {{ data.searchWord }}
            </li>
            <li
              v-for="item in li"
              :key="item.id + Math.random"
              @click="gun(item.id)"
            >
              <img :src="item.al.picUrl" alt="" class="tuweizhi" />
              <div class="duiqiq">
                <p class="shenglue">{{ item.name }}</p>

                <p class="shenglue">{{ item.al.name }} {{ item.ar[0].name }}</p>
              </div>
            </li>
            <li
              v-for="(s, a) in arr"
              :key="s.id + a"
              v-show="name"
              @click="gun(s.id)"
            >
              <p>{{ s.name }} {{ s.album.name }}</p>
            </li>
          </ol>
        </div>
        <span>8</span>

        <van-icon name="search" class="sou-a-a" @click="getSou(name)" />
      </div>
      <van-icon name="balance-o" class="sou-b" />
      <van-icon name="add-o" class="sou-c" />
    </div>
    <!-- 列表 -->
    <van-tabs @click="getVo">
      <van-tab
        v-for="data in video"
        :title="data.name"
        :key="data.id"
        :name="data.id"
      >
        <!-- MV -->
        <div class="mvvv" v-if="data.id == 1000 ? true : false">
          <van-pull-refresh
            v-model="isLoading"
            success-text="刷新成功"
            @refresh="onRefresh"
          >
            <ul class="mv">
              <li
                v-for="(item, i) in obj"
                :key="item.id + i"
                class="mv_a"
                @click="getMv(item.id)"
              >
                <img :src="item.cover" alt="" />
                <p>{{ item.name }}</p>
                <p>{{ item.artistName }}</p>
                <p class="redu">
                  <van-icon name="fire-o" class="mv-icon" />{{ item.playCount }}
                </p>
              </li>
            </ul>
          </van-pull-refresh>
          <div v-if="finished">....没有更多了</div>
        </div>
        <!-- 现场 -->
        <div class="xianchang" v-if="data.id == 58100 ? true : false">
          <ul class="mv">
            <li
              v-for="(it, i) in videos"
              :key="it.data.vid + i"
              class="mv_a"
              @click="chuan(it.data.vid)"
            >
              <img :src="it.data.coverUrl" alt="" />
              <p>{{ it.data.description }}</p>

              <p>
                <img :src="it.data.creator.avatarUrl" alt="" class="imgss" />
                <span class="duiqi">{{ it.data.creator.nickname }}</span>
              </p>
              <p>
                <van-icon name="fire-o" class="mv-icon" />{{
                  it.data.creator.signature
                }}
              </p>
            </li>
          </ul>
        </div>
        <!-- 翻唱 -->
        <div class="fanchang" v-if="data.id == 60100 ? true : false">
          <ul class="mv">
            <li
              v-for="(it, i) in videos"
              :key="it.data.vid + i"
              class="mv_a"
              @click="chuan(it.data.vid)"
            >
              <img :src="it.data.coverUrl" alt="" />
              <p>{{ it.data.description }}</p>
              <p>
                <img :src="it.data.creator.avatarUrl" alt="" class="imgss" />
                <span class="duiqi"> {{ it.data.creator.nickname }}</span>
              </p>
              <p>
                <van-icon name="fire-o" class="mv-icon" />{{
                  it.data.creator.signature
                }}
              </p>
            </li>
          </ul>
        </div>
        <!-- 舞蹈 -->
        <div class="wudao" v-if="data.id == 1101 ? true : false">
          <ul class="mv">
            <li
              v-for="(it, i) in videos"
              :key="it.data.vid + i"
              class="mv_a"
              @click="chuan(it.data.vid)"
            >
              <img :src="it.data.coverUrl" alt="" />
              <p>{{ it.data.description }}</p>
              <p>
                <img :src="it.data.creator.avatarUrl" alt="" class="imgss" />
                <span class="duiqi"> {{ it.data.creator.nickname }}</span>
              </p>
              <p>
                <van-icon name="fire-o" class="mv-icon" />{{
                  it.data.creator.signature
                }}
              </p>
            </li>
          </ul>
        </div>
        <!-- BGM -->
        <div class="BGM" v-if="data.id == 58101 ? true : false">
          <ul class="mv">
            <li
              v-for="(it, i) in videos"
              :key="it.data.vid + i"
              class="mv_a"
              @click="chuan(it.data.vid)"
            >
              <img :src="it.data.coverUrl" alt="" />
              <p>{{ it.data.description }}</p>
              <p>
                <img :src="it.data.creator.avatarUrl" alt="" class="imgss" />
                <span class="duiqi"> {{ it.data.creator.nickname }}</span>
              </p>
              <p>
                <van-icon name="fire-o" class="mv-icon" />{{
                  it.data.creator.signature
                }}
              </p>
            </li>
          </ul>
        </div>
        <!-- 生活 -->
        <div class="shenghuo" v-if="data.id == 2100 ? true : false">
          <ul class="mv">
            <li
              v-for="(it, i) in videos"
              :key="it.data.vid + i"
              class="mv_a"
              @click="chuan(it.data.vid)"
            >
              <img :src="it.data.coverUrl" alt="" />
              <p>{{ it.data.description }}</p>
              <p>
                <img :src="it.data.creator.avatarUrl" alt="" class="imgss" />
                <span class="duiqi"> {{ it.data.creator.nickname }}</span>
              </p>
              <p>
                <van-icon name="fire-o" class="mv-icon" />{{
                  it.data.creator.signature
                }}
              </p>
            </li>
          </ul>
        </div>
        <!-- 游戏 -->
        <div class="youxi" v-if="data.id == 2103 ? true : false">
          <ul class="mv">
            <li
              v-for="(it, i) in videos"
              :key="it.data.vid + i"
              class="mv_a"
              @click="chuan(it.data.vid)"
            >
              <img :src="it.data.coverUrl" alt="" />
              <p>{{ it.data.description }}</p>
              <p>
                <img :src="it.data.creator.avatarUrl" alt="" class="imgss" />
                <span class="duiqi"> {{ it.data.creator.nickname }}</span>
              </p>
              <p>
                <van-icon name="fire-o" class="mv-icon" />{{
                  it.data.creator.signature
                }}
              </p>
            </li>
          </ul>
        </div>
        <!-- ACG -->
        <div class="ACGyinyue" v-if="data.id == 57104 ? true : false">
          <ul class="mv">
            <li
              v-for="(it, i) in videos"
              :key="it.data.vid + i"
              class="mv_a"
              @click="chuan(it.data.vid)"
            >
              <img :src="it.data.coverUrl" alt="" />
              <p>{{ it.data.description }}</p>
              <p>
                <img :src="it.data.creator.avatarUrl" alt="" class="imgss" />
                <span class="duiqi"> {{ it.data.creator.nickname }}</span>
              </p>
              <p>
                <van-icon name="fire-o" class="mv-icon" />{{ it.data.title }}
              </p>
            </li>
          </ul>
        </div>
        <!-- 饭圈 -->
        <div class="fanquan" v-if="data.id == 1105 ? true : false">
          <ul class="mv">
            <li
              v-for="(it, i) in videos"
              :key="it.data.vid + i"
              class="mv_a"
              @click="chuan(it.data.vid)"
            >
              <img :src="it.data.coverUrl" alt="" />
              <p>{{ it.data.description }}</p>
              <p>
                <img :src="it.data.creator.avatarUrl" alt="" class="imgss" />
                <span class="duiqi"> {{ it.data.creator.nickname }}</span>
              </p>
              <p>
                <van-icon name="fire-o" class="mv-icon" />{{
                  it.data.creator.signature
                }}
              </p>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  reqvideoAPI,
  // reqMvAPI,
  reqSsAPI,
  reqCIAPI,
  reqSLiAPI,
  reqSPiAPI,
  // videoListAPI,
  videosListAPI,
  videoLiAPI,
} from "../../api/yuncun";
import { Toast } from "vant";

export default {
  data() {
    return {
      active: 0,
      obj: [],
      sum: [],
      count: 0,
      isLoading: false,
      offset: 1,
      finished: true,
      name: "",
      ci: "",
      list: {},
      falg: false,
      li: {},
      re: true,
      video: {},
      videos: {},
      arr: [],
    };
  },
  computed: {},
  watch: {
    name: {
      immediate: true,
      handler(val) {
        if (this.name) {
          this.name = val;
          this.getSing();
        }
      },
    },
  },

  methods: {
    //渲染
    async getVideo() {
      const resulta = await reqCIAPI();

      this.ci = resulta.data.data.showKeyword;

      let num = this.offset * 30;
      this.finished = false; // 开启加载
      const result = await reqvideoAPI(num);

      this.obj = [...this.obj, ...result.data.data]; // 把新获取的数据加上前面的数据展示出来
      // console.log(this.obj);
      if (result.data.data.length < 10) {
        // 说明是最后一页
        this.finished = false;
      } else {
        this.offset++;
        this.finished = true;
      }
      if (!localStorage.getItem("cookie")) {
        this.$router.push("/login");
      }
    },
    // 监听滚动条
    onScroll() {
      let innerHeight = this.$el.clientHeight; // 滚动容器高度
      //   console.log(this.$el);
      let outerHeight = document.documentElement.clientHeight; // 屏幕尺寸高度
      let scrollTop = document.documentElement.scrollTop; // 卷去的高度
      // console.log(innerHeight, outerHeight, scrollTop);
      if (scrollTop == 0) {
        // 避免切换时读取异常高度
        innerHeight = 10000;
      }
      if (this.finished) {
        if (innerHeight <= outerHeight + scrollTop + 10) {
          this.getVideo();
        }
      }
    },
    //点击跳转mv视频
    getMv(id) {
      this.$router.push("/mvmusic/" + id);
    },

    //下拉获取资源投放在
    async getVideos() {
      let num = this.offset * 30;
      const result = await reqvideoAPI(num);
      this.obj = [...result.data.data, ...this.obj]; // 把新获取的数据加上前面的数据展示出来
      this.offset++;
    },
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.getVideos();

        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1500);
    },
    //热搜列表(详细)
    async sou() {
      this.falg = true;
      const list = await reqSLiAPI();
      this.list = list.data.data;
      // console.log(this.list);
      this.re = false;

      //
    },
    //搜索歌曲
    async getSou(name) {
      this.re = true;
      const resultww = await reqSsAPI(name);
      // console.log(resultww);
      this.li = resultww.data.result.songs;
    },
    cha() {
      this.falg = false;
    },
    //跳转播放页
    gun(id) {
      this.$router.push("/playpage/" + id);
    },
    //把点击的内容放到input框
    getDataName(name) {
      this.name = name;
      this.getSou(name);
    },
    //搜索框模糊匹配
    async getSing() {
      const na = this.name;
      const pi = await reqSPiAPI(na);
      // console.log(pi.data.result.songs);
      this.arr = pi.data.result.songs;
    },
    //获取视频标签列表
    // async getVo() {
    // const result = await videoListAPI();
    // console.log(result);
    // this.video = result.data.data;
    // },
    //获取视频列表
    async getVos() {
      const resultsa = await videosListAPI();
      // console.log(resultsa);
      this.video = resultsa.data.data;
    },
    //获取视频标签列表
    async getVo(id) {
      const result = await videoLiAPI(id);
      // console.log(id);
      // console.log(result);
      this.videos = result.data.datas;
      if (id == 1000) {
        this.videos = {};
      }
    },
    //页面初始化渲染
    async getMO(id) {
      const result = await videoLiAPI(id);
      // console.log(id);
      // console.log(result);
      this.videos = result.data.datas;
      if (id == 1000) {
        this.videos = {};
      }
      if (!localStorage.getItem("cookie")) {
        this.$router.push("/login");
      }
    },
    //跳转视频页
    async chuan(id) {
      this.$router.push("/videopage/" + id);
    },
  },
  created() {
    this.getVideo();

    this.getVos();
    let id = 58100;
    this.getMO(id);
  },
  mounted() {
    window.addEventListener("scroll", this.onScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll);
  },
  components: {},
};
</script>
<style scoped>
.yuncun {
  width: 95%;
  margin: 0 auto;
  background-color: rgb(243, 241, 241);
  margin-bottom: 50px;
}
.sou {
  display: flex;
  justify-content: space-between;
  padding: 15px 15px;
  background-color: #fff;
  height: 30px;
  line-height: 25px;
  font-size: 23px;
}
.sou-a {
  /* flex: 1; */
  position: relative;
}
.sou-a span {
  position: absolute;
  top: 6px;
  left: -24px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  line-height: 17px;
  border-radius: 50%;
  text-align: center;
  background-color: red;
  color: #ffffff;
}
.sou-a .inp {
  width: 238px;
  font-size: 12px;
  color: rgb(49, 49, 49);
  text-indent: 3rem;
  border-radius: 20px;
  border: none;
  background-color: rgb(238, 237, 237);
  height: 30px;
  line-height: 30px;
}
.van-icon {
  line-height: 30px;
  margin-top: 3px;
}
.sou-a-a {
  font-size: 19px;
  position: absolute;
  top: -1px;
  left: 28px;
}
.sou-b {
  color: red;
}
.sou-c {
  width: 23.5px;
  height: 23px;
  line-height: 23px;
  margin-top: 5px;
  background-color: red;
  border-radius: 100%;
  color: #ffffff;
}
.mv {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 50px;
  margin-top: 10px;
}
.mv li {
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 0 0 5px 5px;
}
.mv_a {
  /* width: 48%; */
  position: relative;
}
.mv_a img {
  display: block;
  width: 100%;
  border-radius: 4px 4px 0 0;
}
.mv_a p {
  padding: 5px 10px;
  margin: 0;
}
.mv_a p:nth-of-type(1) {
  color: rgb(13, 147, 209);
  margin-top: 5px;
  font-size: 14px;
  text-align: justify;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 175px;
}
.mv_a p:nth-of-type(2) {
  position: relative;
  margin: 0;
  color: rgba(235, 8, 8, 0.39);
}
.duiqi {
  position: absolute;
  top: 25px;
  right: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
}
.mv_a p:nth-of-type(3) {
  margin: 0;
  text-align: left;
  color: rgb(202, 201, 201);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 175px;
}
.mv-icon {
  color: red;
}
.sou-b {
  position: relative;
}
ol {
  position: absolute;
  top: 32px;
  right: -106px;
  width: 159%;
  padding: 10px 15px;
  z-index: 66;
  background-color: #fff;
  opacity: 0.9;
  text-indent: 2rem;
}
ol li {
  font-size: 14px;
  color: #000;
  margin-bottom: 5px;
  border: 1px solid transparent;
}
ol li img {
  width: 50px;
  height: 50px;
}
.cha {
  position: absolute;
  top: 0;
  right: 16px;
  color: rgb(122, 122, 122);
  font-size: 14px;
}
.tuweizhi {
  vertical-align: text-bottom;
}
.duiqiq {
  display: inline-block;
  margin-top: 10px;
}
.shenglue {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 292px;
}
.mv .mv_a .imgss {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.mv .mv_a .redu {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  padding: 0 10px;
  color: #ffffff;
}
</style>
